<template>
	<view class="goods-list">
		<view class="goods-item" v-for="(item,index) in goodsList" :key="index" @click="gotoGoodsDetail(item)">
			<view class="goods-item-left">
				<image :src="item.goods_small_logo || defaultPic" mode="heightFix" class="goods-img"></image>
			</view>
			<view class="goods-item-right">
				<text>{{item.goods_name}}</text>
				<view class="price">
					￥{{item.goods_price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 请求参数对象
				queryObj:{
					query:'',
					cid:'',
					pagenum:1,
					pagesize:10	
				},
				// 是否正在请求数据
				isLoading:false,
				goodsList:[],
				total:0,
				//默认图片
				defaultPic:'http://image4.suning.cn/uimg/b2c/newcatentries/0070175200-000000000763892692_2_400x400.jpg'
			};
		},
		onLoad(options) {
			this.queryObj.query = options.query || '';
			this.queryObj.cid = options.cid || '';
			// console.log(this.queryObj)
			this.getGoodsList()
		},
		methods:{
			// 获取商品列表
			async getGoodsList(cb){
				// 打开节流阀
				this.isLoading = true
				const {data:res} = await uni.$http.get('api/public/v1/goods/search',this.queryObj);
				// 关闭节流阀
				this.isLoading = false;
				cb && cb()
				if(res.meta.status != 200)return uni.$showMsg()
				this.goodsList =[...this.goodsList,... res.message.goods];
				this.total = res.message.total;
			},
			// 跳转到详情页
			gotoGoodsDetail(item){
				uni.navigateTo({
					url:'../goods_detail/goods_detail?goods_id=' + item.cat_id
				})
			}
		},
		onReachBottom() {
			// 判断是否还有下一页数据
			if(this.queryObj.pagenum * this.queryObj.pagesize >=this.total)
			return uni.$showMsg('数据加载完毕')
			//让页码值自增加一
			if(this.isLoading) return
			this.queryObj.pagenum++;
			this.getGoodsList()
		},
		onPullDownRefresh() {
			// 重置关键数据
			this.queryObj.pagenum = 1;
			this.total = 0;
			this.isLoading = false;
			this.queryObj.query=[],
			this.getGoodsList(()=>{
				uni.stopPullDownRefresh()
			})
		}
	}
</script>

<style lang="scss">
.goods-list{
	display: flex;
	flex-direction:column;
	background-color: #fff;
	.goods-item{
		display: flex;
		align-items: center;
		height: 120px;
		border-bottom: 1px solid #ccc;
		padding: 5px 0;
		.goods-item-left{
			height: 120px;
			margin-right: 5px;
			.goods-img{
				width: 100px;
				height: 100px;
			}
		}
		.goods-item-right{
			height: 120px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text{
				font-size: 13px;
			}
			.price{
				color: #c00000;
			}
		}
		}
}
</style>
